<template>
    <el-dialog v-model="drawer" title="服务商信息编辑" :append-to-body="true" width="400px" @close="close">
        <el-form size="small" :model="form" :rules="rules" ref="ruleRefForm" label-width="110px">
            <el-form-item label="服务商" prop="service">
                <el-select v-model="form.service" placeholder="请选择" size="small" filterable>
                    <el-option
                        v-for="item in serviceList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="服务商对接人" prop="serviceManage">
                <el-select v-model="form.serviceManage" placeholder="请选择" size="small">
                    <el-option
                        v-for="item in activeManageList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="联系电话" prop="phone">
                <el-input v-model="form.phone" placeholder="请输入" style="width:135px"></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <el-row justify="center">
                <el-button type="primary" size="small" @click="submitForm(ruleRefForm)">提交</el-button>
                <el-button type="default" size="small" @click="cancelForm(ruleRefForm)">取消</el-button>
            </el-row>
        </template>
    </el-dialog>
</template>
  
<script>
import { computed, reactive, ref, toRefs, watch } from 'vue'
import { ElMessage } from 'element-plus'

export default {
    name: 'ActiveService',
    props: {
        dialogDrawer: {
            type: Boolean,
            default: false
        },
        editForm: {
            type: Object,
            default() {
                return {}
            }
        }
    },
    setup(props, context) {
        const { dialogDrawer, editForm } = toRefs(props)
        const drawer = computed({
            get: () => dialogDrawer.value,
            set: val => {
                context.emit('update:dialogDrawer', val)
            }
        })
        const ruleRefForm = ref()
        const state = reactive({
            form: {},
            rules: {},
            serviceList: [{
                label: 'xxxx服务商',
                value: 1
            },{
                label: 'xxxx2服务商',
                value: 2
            }],
            activeManageList: [{
                label: '赵',
                value: 1
            },{
                label: '陈',
                value: 2
            }],
        })
        watch(() => dialogDrawer.value,
            val => {
                if(val) {
                    if (ruleRefForm.value) {
                        ruleRefForm.value.resetFields()
                    }
                    state.form = editForm.value
                }
            }
        )
        const submitForm = formEl => {
            if (!formEl) return
            formEl.validate(valid => {
                if (valid) {
                    close()
                    ElMessage.success('编辑成功')
                    context.emit('onSubmit', true)
                }
            })
        }
        const cancelForm = formEl => {
            if (!formEl) return
            formEl.resetFields()
            close()
        }
        const close = () => {
            context.emit('update:dialogDrawer', false)
        }
        const handleActive = e => {
            const index = state.parentClassifyList.findIndex(item => {
                return item.value == e
            })
            if(index > -1){
                state.parentIndex = index
            }
            state.form.classify = ''
        }
        return {
            ...toRefs(state),
            drawer,
            submitForm,
            cancelForm,
            ruleRefForm,
            close,
            handleActive
        }
    }
}
</script>

<style lang="scss" scoped>
.el-form-item{
    align-items: start;
    flex: 1;
}
</style>